<template>
    <div class="grid-content bg-purple">
        <div class="left">
            <div class="tit1">
                <span class="block">Good Morning,</span>
                <span class="jr">buddy</span>
            </div>
            <div class="tit2">数字化提升管理系统</div>
        </div>
        <div class="rig">
            <img src="~@/assets/list/zhaohutu.png" alt="" class="zh-image"/>
        </div>
    </div>
</template>

<script>
export default {
    name: "headerTitle"
};
</script>
<style>
.el-tabs__content {
    padding: 20px;
    border-radius: 10px;
    background: white;
}
</style>
<style lang="scss" scoped>
.bg-purple {
    background: #ffffff;

    .left {
        padding: 24px 0 0 40px;
    }

    .tit1 {
        font-size: xx-large;
        font-weight: 600;
    }

    .block {
        color: #1a1a1a;
    }

    .jr {
        color: #fa8876;
    }

    .tit2 {
        margin-top: 15px;
        color: #7a8499;
        font-family: PingFang SC;
    }

    .zh-image {
        height: 153px;
    }

    .rig {
        position: absolute;
        right: 20px;
        top: -20px;
    }

    .grid-content {
        min-height: 36px;
        display: flex;
        justify-content: space-between;
        border-radius: 10px;
        position: relative;
        margin-top: 21px;
        padding-bottom: 40px;
        margin-bottom: 15px;
    }
}

.el-main {
    padding: 0 20px;
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #ffffff;

    .left {
        padding: 24px 0 0 40px;
    }

    .tit1 {
        font-size: xx-large;
        font-weight: 600;
    }

    .block {
        color: #1a1a1a;
    }

    .jr {
        color: #fa8876;
    }

    .tit2 {
        margin-top: 15px;
        color: #7a8499;
        font-family: PingFang SC;
    }

    .zh-image {
        height: 153px;
    }

    .rig {
        position: absolute;
        right: 20px;
        top: -20px;
    }
}

.bg-purple-light {
    background: linear-gradient(0deg, #b1d0fc 0%, #e8f5fd 100%);
    opacity: 0.6;
    box-shadow: 0px 0px 11px 0px rgba(29, 90, 151, 0.3);
    border: 1px solid #ffffff;
    margin-top: 15px;
}

.grid-content {
    min-height: 36px;
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    position: relative;
    margin-top: 21px;
    padding-bottom: 40px;
    margin-bottom: 15px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.left {
}
</style>
